<template>
<div class="table-component">
  <table class="table head">
    <colgroup>
      <col class="col" v-for="{ width, label } in table.head" :key="label" :style="{ width: width + 'px' }" />
    </colgroup>
    <thead>
      <tr class="tr">
        <th class="th" v-for="{ label } in table.head" :key="label">
          <div class="content">
            {{ label }}
          </div>
        </th>
      </tr>
    </thead>
  </table>

  <div class="body-wrapper">
    <!-- <VueSeamlessScroll style="height: 100%; overflow: hidden" :data="table.data" v-bind="seamlessScrollOption"> -->
    <table class="table body">
      <colgroup>
        <col class="col" v-for="{ width, label } in table.head" :key="label" :style="{ width: width + 'px' }" />
      </colgroup>
      <tbody>
        <tr class="tr" v-for="(d, index) in table.data" :key="index" @click="table.flyTo(d)">
          <td class="td" v-for="{ prop, locate } in table.head" :key="prop">
            <template v-if="prop === 'serialNumber'">
              <div class="content">
                {{ index + 1 }}
                <!-- <div class="serial-number"> {{ index + 1 < 10 ? `0${index + 1}` : index + 1 }} </div> -->
              </div>

            </template>
            <template v-else-if="prop === 'locate'">
              <div class="content" @click="locate">
                <el-icon>
                  <Location />
                </el-icon>
              </div>
            </template>

            <template v-else>
              <div class="content">
                {{ d[prop] }}
              </div>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- <div class="interval-row"></div> -->
    <!-- </VueSeamlessScroll> -->
  </div>
</div>
</template>
<script setup>
import { VueSeamlessScroll } from '@meruem117/vue-seamless-scroll'
import { reactive, onBeforeUnmount, inject } from 'vue'
import { rectangle, getRandomLonLatInRectangle, addPersonnelOnMap } from '../views/cesium-map/personnel'
import { waitUntilValueExist } from '../utils/unsorted'
import { fakerZH_CN as faker } from '@faker-js/faker';


/*
export function createRandomUser() {
  return {
    userId: faker.string.uuid(),
    username: faker.person.fullName(), // before version 9.1.0, use userName()
    email: faker.internet.email(),
    avatar: faker.image.avatar(),
    password: faker.internet.password(),
    birthdate: faker.date.birthdate(),
    registeredAt: faker.date.past(),
  };
}

export const users = faker.helpers.multiple(createRandomUser, {
  count: 5,
});
*/




// import * as api from '../api/left-right.js'


// const { rowLength, place } = defineProps({
//   rowLength: {
//     type: [String, Number],
//     required: true,
//   },
// })

const table = reactive({
  data: [],
  head: [
    {
      prop: 'serialNumber',
      label: '序号',
      width: 40,
    },
    {
      prop: 'name',
      label: '姓名',
      width: 60,
    },
    {
      prop: 'department',
      label: '单位',
      // width: 160,
    },
    {
      prop: 'post',
      label: '职务',
      width: 60,
    },
    {
      prop: 'category',
      label: '类别',
      width: 60,
    },
    {
      prop: 'contact',
      label: '联系方式',
      width: 100,
    },
    {
      prop: 'locate',
      label: '定位',
      width: 50,
      locate() {
        console.log('定位')
      }
    }
  ],

  fetchData() {
    console.log('-------------------')
    const md = Array(30).fill().map((_, index) => ({
      name: faker.person.fullName(),
      department: '国家电网华北第九所',
      post: '职务A',
      category: Math.random() > 0.3 ? '内部' : '外部',
      contact: 12345678900 + index,
      lonLat: getRandomLonLatInRectangle(rectangle),
    }))

    Promise.resolve(md)
      .then((data) => {
        if (data) {
          table.data = data

          waitUntilValueExist(() => window.cesiumViewer).then(() => {
            setTimeout(() => {
              addPersonnelOnMap(data)
            }, 4000)
          })

        } else {
          table.data = []
        }
      })
      .catch((err) => {
        table.data = []
      })
  },

  // flyTo({ longitude, latitude }) {
  //   if (longitude && latitude) {
  //     window.parent.scene.camera.flyTo(
  //       {
  //         position: window.parent.EVAPI.Cartographic.fromArray([
  //           longitude,
  //           latitude,
  //           350,
  //         ]),
  //         heading: 0,
  //         pitch: 0,
  //         roll: 0,
  //         type: window.parent.EVAPI.CoordType.Latlongheight,
  //         duration: 1,
  //       },
  //       function () { },
  //     )
  //   }
  // },
  setup() {
    this.fetchData()
    const clearIntervalId = setInterval(
      () => {
        this.fetchData()
      },
      1000 * 60 * 5,
    )
    onBeforeUnmount(() => {
      clearInterval(clearIntervalId)
    })
  },
})

    console.error('-------------------')
table.setup()

</script>

<style lang="scss" scoped>
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// desc: 扩展点击区域
// 可选参数 $color  ? ?  @if  null
@mixin expand-click($num : 5) {
  // position: relative;

  // &:hover {
  //     color: $color;
  // }

  &:active {
    transform: scale(0.9);
  }

  // 注意有些字体图标是用伪类实现的，避免冲突。
  &::after {
    content: '';
    cursor: pointer;
    position: absolute;
    top: -#{$num}px;
    left: -#{$num}px;
    right: -#{$num}px;
    bottom: -#{$num}px;
  }
}

.table-component {
  height: 100%;
  --tr-content-height: 30px;
  --tr-height: calc(var(--tr-content-height) + var(--tr-padding-top, 0px));
  font-family: MicrosoftYaHei;
  // todo
  font-size: 14px;


  .table {


    table-layout: fixed;
    border-spacing: 0px;

    .th,
    .td {
      padding: 0;

      .content {
        height: 100%;
        @include ellipsis();
        display: grid;
        place-items: center;
      }
    }

    &.head {
      width: 100%;
      padding-right: 8px;

      .th {

        height: var(--tr-content-height);
        font-weight: normal;
        font-stretch: normal;
        // color: #a5e9fb;
        // background-color: rgba(0, 101, 142, 0.59);
      }
    }

    &.body {
      width: 100%;

      .tr:nth-child(even) {
        background-color: var(--row-stripe-bg-color);
      }


      .td {
        height: var(--tr-height);
        cursor: pointer;
        padding-top: var(--tr-padding-top);

      }


      .tr:hover {
        .td {
          color: #f6ac63;
        }
      }
    }
  }

  .body-wrapper {
    // --row-length: v-bind(rowLength);
    // height: calc(var(--tr-height) * var(--row-length));
    height: calc(100% - var(--tr-content-height));
    scrollbar-gutter: stable;
    overflow-y: hidden;

    &:hover {
      overflow-y: auto;
    }

    .interval-row {
      height: var(--tr-height);
    }
  }
}
</style>
